import React from "react";
import {
	Text,
	View,
	Image,
	TouchableOpacity,
	Platform,
	ScrollView
} from "react-native";
import BaseComponent from "../common/BaseComponent";
import NoticeIcon from "../user/NoticeIcon";
import TImage from "../../components/TImage";
import SizeUtils from "../../common/SizeUtils";
import Config from "../../config";
import SuggestionsView from "../jianyi/SuggestionsView";
import MyFeedbackView from "../jianyi/MyFeedbackView";

const Tabs = ["建议意见反馈", "我的反馈"];
export default class JianyiView extends BaseComponent {
	constructor(props) {
		super(props);
		this.state = {
			currentIndex: 0
		};
		this._scrollView = null;
		this._pageWidth = SizeUtils.getWindowSize().width;
		this._pageHeight =
			SizeUtils.getWindowSize().height -
			SizeUtils.translateDesignHeightToCode(80);
		this._clickTopBtnTimer = null;
	}
	render() {
		return (
			<View style={{ flex: 1, paddingTop: Config.paddingTop }}>
				{this._renderNavigationBar()}
				{this._renderTopButton()}
				{this._renderScrollView()}
			</View>
		);
	}
	_onScroll(event) {
		let x = event.nativeEvent.contentOffset.x;
		let index = Math.round(x / this._pageWidth);
		if (this.state.currentIndex != index) {
			this.setState({
				currentIndex: index
			});
		}
	}
	_renderScrollView() {
		return (
			<ScrollView
				style={{
					width: this._pageWidth,
					height: this._pageHeight
				}}
				ref={ref => (this._scrollView = ref)}
				horizontal={true} // 水平方向
				showsHorizontalScrollIndicator={false} // 水平指示器
				showsVerticalScrollIndicator={false} // 垂直指示器
				pagingEnabled={true} // 开启分页功能
				alwaysBounceHorizontal={false} //弹性拉动一截
				onScroll={this._onScroll.bind(this)}
				scrollEnabled={this.state.scrollEnabled}
			>
				<SuggestionsView />
				<MyFeedbackView />
			</ScrollView>
		);
	}
	_getTitle() {
		return "建议";
	}
	_renderNavigationBarRightButtonContent() {
		return (
			<View style={{ flexDirection: "row", alignItems: "center" }}>
				<TouchableOpacity
					style={{ marginRight: 10 }}
					onPress={() => {
						this.gotoPage(Config.pages.home_search);
					}}
				>
					<TImage
						source={require("../../../resource/images/workhard/search2.png")}
						style={{ width: 40, height: 40 }}
					/>
				</TouchableOpacity>
				<NoticeIcon
					isWhite={true}
					authorization={this.props.authorization}
				/>
			</View>
		);
	}
	_renderTopButton() {
		return (
			<View
				style={{
					width: SizeUtils.getWindowSize().width,
					height: SizeUtils.translateDesignHeightToCode(80),
					flexDirection: "row",
					justifyContent: "center",
					alignItems: "center",
					borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
					borderColor: "#eeeeee",
					backgroundColor: "#ffffff"
				}}
			>
				{this._getButton(0)}
				{this._getButton(1)}
			</View>
		);
	}

	_getButton(index) {
		return (
			<TouchableOpacity
				onPress={() => this._onPressBtn(index)}
				style={{
					width: SizeUtils.getWindowSize().width / Tabs.length,
					height: SizeUtils.translateDesignHeightToCode(80),
					flexDirection: "column",
					justifyContent: "center",
					alignItems: "center"
				}}
			>
				<View
					style={{
						height: SizeUtils.translateDesignHeightToCode(76),
						justifyContent: "center",
						alignItems: "center"
					}}
				>
					<Text
						style={{
							fontSize: SizeUtils.translateFontSizeToCode(28),
							color:
								index == this.state.currentIndex
									? "#db3132"
									: "#666666"
						}}
					>
						{Tabs[index]}
					</Text>
				</View>
				<View
					style={{
						borderColor: "#db3132",
						borderBottomWidth:
							index == this.state.currentIndex
								? SizeUtils.translateDesignNumToCode(10)
								: 0,
						width: SizeUtils.translateDesignWidthToCode(100),
						height: SizeUtils.translateDesignHeightToCode(5)
					}}
				/>
			</TouchableOpacity>
		);
	}
	_onPressBtn(index) {
		if (this._clickTopBtnTimer) {
			return;
		}
		this._clickTopBtnTimer = setTimeout(() => {
			this.setState({
				scrollEnabled: Platform.OS === "ios"
			});
			this._clearClickTopBtnTimer();
		}, 500);
		this.setState(
			{
				scrollEnabled: true
			},
			() => this._scrollView.scrollTo({ x: index * this._pageWidth })
		);
	}
	_clearClickTopBtnTimer() {
		this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer);
		this._clickTopBtnTimer = null;
	}
}
